<template>
  <yt-page :title="options.global.title"
    :rightData="options.search ? rightData : []"
    :input="input"
    v-model="inputValue"
    @change="refresh">
    <yt-group :group="false"
      ref="group"
      :searchApi="options.global.searchApi || searchApi">
      <yt-card slot-scope="item"
        btn="查看详情"
        :edge="false"
        :tag="false"
        :title="item[options.list.serial.field]"
        @btn-click="goDetailPage(item.id)">
        <yt-cell v-for="(column, index) in options.columns"
          :key="index"
          v-if="!isHide(column)"
          border="false"
          :label="column.label"
          :value="item[column.field]"></yt-cell>
      </yt-card>
    </yt-group>
  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
export default {
  name: 'mmbsList',
  props: {
    options: {
      type: Object,
      default() {
        return {
          global: {
            title: '列表展示', // 页面标题
            collectionName: '', // 表名称
            param: null, // 全局查询参数
            searchApi: null // 查询函数
          },
          list: {
            layout: 'card', // 列表布局
            serial: {
              field: '' // 卡片标题显示字段，作为card使用
            }
          },
          search: {
            layout: '', // 搜索布局
            serial: {
              field: [] // 搜索字段
            }
          },
          columns: [] // 表字段
        }
      }
    }
  },
  data() {
    return {
      input: false,
      inputValue: '',
      rightData: [
        {
          font: 'yt-icon yt-icon-search',
          click: () => {
            this.input = !this.input
          }
        }
      ],
      currentParam: {},
      searchApi: async ({ skip, limit }) => {
        let options = _.merge({ skip, limit }, this.currentParam)
        let items = await commonApi.search(
          this.options.global.collectionName,
          options
        )
        return items
      }
    }
  },
  methods: {
    isHide(column) {
      return column.hide
        ? column.hide.every(action => action === 'card')
        : false
    },
    refresh() {
      let search = this.options.search
      if (search.layout === 'inline') {
        this.currentParam = {
          contains: { [search.serial.field[0]]: this.inputValue }
        }
      }
      this.$refs.group.startPull()
    }
  }
}
</script>

<style lang="stylus" scoped>
>>>.yt-cell {
  align-items: flex-start;
}

>>>.yt-cell-label {
  padding: 0;
}

>>>.yt-cell-value {
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>
